<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	    <div id="app">
	    	<label v-text="msg"></label>
	    	<form @submit.prevent="add(newItem)">
        	    <div v-for="(item,index) in items">
        	        <label>{{item.text}}<input type="button" @click="del(index)" value="删除"></label>
        	    </div>
        	    <div><input type="text" v-model="newItem.text" /></div>
        	    <div><button>添加</button></div>
	    	</form>
	    </div>
	    <script type="text/javascript" src="../lib/vue.min.js" ></script>
	    <script>
	        /*
	         * push()     //在结尾增加一条或多条数据
                pop()      //删除最后一条数据
                shift()     //删除第一条数据，并返回这条数据
                unshift()    //在开始增加一条或多条数据，并返回数组长度
                splice()    //向/从数组中添加/删除项目，然后返回被删除的项目。
                sort()    //对数组的元素进行排序。
                reverse()    //颠倒数组中元素的顺序
	         */
	        new Vue({
	            el:'#app',
	            data:{
	                msg:'实验楼第一个vuejs示例',
	                items:[{text:'实验楼'}],
	                newItem:{text:''}
	            },
	            methods:{
	                add:function(){
	                    this.items.push(this.newItem);
	                    this.newItem = {text:''};
	                    console.log(this.items);
	                },
	                del:function(index){
	                    this.items.splice(index,1);
	                }
	            }
	        });
	    </script>
	</body>
</html>
